<template>
    <!--  头部组件  -->
    <div class="tophead">
        <img src="../assets/images/Group11@3x.png" alt="">
        <p>BQ展示子系统</p>
        <p>用户名</p>
        <img src="../assets/images/Group(2).png" alt="haha" class="touxiang">
        <!--        搜索图标-->
        <img src="../assets/images/搜索.png" alt="" class="search">
    </div>
</template>

<script>
    export default {
        name: "above"
    }
</script>

<style scoped lang="less">
    p {
        cursor: default;
    }

    .tophead {
        width: 1440px;
        height: 64px;
        background: #001529;
        margin: 0 auto;

        img:nth-of-type(1) {
            float: left;
            width: 32px;
            height: 32px;
            margin-top: 16px;
            margin-right: 8px;
            margin-left: 24px;
        }

        p:nth-of-type(1) {
            width: 104px;
            height: 22px;
            font-size: 16px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 22px;
            float: left;
            margin-top: 21px;
        }

        .touxiang {
            float: right;
            margin-right: 8px;
            margin-top: 20px;
            width: 24px;
            height: 24px;
            border-radius: 100%;
        }

        p:nth-of-type(2) {
            width: 42px;
            height: 22px;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 22px;
            float: right;
            margin-top: 21px;
            margin-right: 24px;
        }
        .search {
            float: right;
            margin-right: 65px;
            margin-top: 25px;
            width: 14px;
            height: 14px;
            /*background: #FFFFFF;*/
            opacity: 0.85;
        }
    }
</style>